<template>
    <div id="box">
        <div class="filter"></div>
        <template>
            <el-carousel :interval="3000" arrow="always">
                <el-carousel-item v-for="data in dataList" :key="data.targetId">
                    <h3>
                        <img :src="data.imageUrl" alt="">
                    </h3>
                </el-carousel-item>
            </el-carousel>
        </template>
    </div>
</template>

<script>
export default {
    props: ['dataList']
}
</script>

<style lang="scss" scoped>
    #box {
        overflow: hidden;
        position: relative;
        height: 300px;

        .filter {
            height: 100%;
            background-image: url(../assets/upload/wallhaven-zm9l6j.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: top center;
            box-shadow: 0px 0px 5px 5px rgba($color: #000000, $alpha: 0.7);
            filter: blur(5px);
        }

        .el-carousel {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 1200px;
            margin: 0 auto;

            .el-carousel__item h3 {
                color: #475669;
                font-size: 18px;
                opacity: 0.75;
                line-height: 100%;
                margin: 0;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
            
            .el-carousel__item:nth-child(2n) {
                background-color: #99a9bf;
            }
            
            .el-carousel__item:nth-child(2n+1) {
                background-color: #d3dce6;
            }
        }
    }
</style>